<template>
	<view class="chat">
		<u-loadmore v-if="loading" status="loading" loadingText="" />
		<template v-for="(chat, key) in conversation">
			<view v-if="chat.type == 'question'" class="question">
				<view v-if="chat.img.length" class="img-list">
					<image v-for="(img, i) in chat.img" :key="i" class="img" mode="aspectFill" :src="img"></image>
				</view>
				<view class="text">{{ chat.content }}</view>
			</view>
			<view v-if="chat.type == 'answer'" class="answer">
				<image v-if="type" class="avatar" mode="aspectFill" :src="'../static/'+type+'.png'"></image>
				<view class="content">
					<view class="text" v-html="chat.content"></view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import MarkdownIt from 'markdown-it'
	import shareApi from '@/api/share.js'
	export default {
		data() {
			return {
				type: '',
				conversation: [],
				loading: false
			}
		},
		onLoad(option) {
			this.getData(option.id || 0)
		},
		methods: {
			getData(id) {
				this.loading = true
				shareApi.get({
					id: id
				}).then(res => {
					this.type = res.data.data.type
					for (const item of res.data.data.list) {
						const md = new MarkdownIt()
						const val = {
							img: []
						}
						if (item.role == 'user') {
							val.type = 'question'
							val.content = item.content
							if (typeof item.img != 'undefined') {
								val.img = item.img
							}
						} else {
							val.type = 'answer'
							val.content = md.render(item.content)
						}
						this.conversation.unshift(val)
					}
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.chat {
		margin: 0 24rpx;
		font-size: 32rpx;
		padding-top: 24rpx;
		user-select: text !important;

		.question {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.img-list {
				display: flex;
				column-gap: 8rpx;
				margin-bottom: 8rpx;

				.img {
					max-width: 220rpx;
					max-height: 220rpx;
					border: 1rpx solid #dedadf;
					border-radius: 8rpx;
				}
			}

			.text {
				background-color: #3577F5;
				color: #FFFFFF;
				border-radius: 4rpx;
				padding: 15rpx 30rpx;
				line-height: 48rpx;
			}
		}

		.answer {
			display: flex;
			margin-top: 42rpx;
			margin-bottom: 30rpx;

			.avatar {
				width: 44rpx;
				height: 44rpx;
				margin-right: 33rpx;
			}

			.content {
				width: calc(100% - 77rpx);
				display: flex;
				flex-direction: column;

				.text {
					color: #333333;
					line-height: 48rpx;

					&.error {
						color: #ff0000;
					}
				}
			}
		}
	}
</style>